<template>
  <div ref="myecharts" style="width: 100%; height: 100%"></div>
</template>
<script>
import { defineComponent, ref, computed } from "vue";
import * as echarts from "echarts";
import { onMounted } from "@vue/runtime-core";
export default defineComponent({
  components: {},
  props: {
    setting: {
      type: Object,
      default: () => {
        return {
          title: {
            text: "ECharts 入门示例",
          },
          tooltip: {},
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: [5, 20, 36, 10, 10, 20],
            },
          ],
        };
      },
    },
  },
  setup(props) {
    const loading = ref(true);
    const myecharts = ref(null);
    onMounted(() => {
      const Echarts = echarts.init(myecharts.value);
      Echarts.setOption(props.setting);
    });

    setTimeout(() => {
      loading.value = false;
    }, 1000);
    return {
      loading,
      myecharts,
    };
  },
});
</script>
